<template>
    <div id="dept" v-loading="loading">
        <div class="manage">
            <el-button type="primary" size="small" @click="alertForm(1,0)"><i class="el-icon-circle-plus-outline" style="margin-right: 5px"></i>新增</el-button>
        </div>
        <div class="title">
            <div class="container_table">
                <el-table
                        :data="tableData.slice((currentPage - 1)* pageSize, currentPage*pageSize)"
                        style="width: 100%">
                    <el-table-column
                            type="index"
                            label="序号"
                            width="55"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="部门名称"
                            width="180"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="remark"
                            label="备注"
                            align="center">
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="alertForm(2, scope.row)" size="mini">修改</el-button>
                            <el-button type="danger" @click="delDepartment(scope.$index,scope.row)" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        class="fy"
                        background
                        layout="prev, pager, next"
                        @current-change="current_change"
                        :total="total"
                        v-show="page"
                        :pageSize.sync="pageSize">
                </el-pagination>
            </div>
        </div>
        <el-dialog :title="form_title"
                   :before-close="closeForm"
                   :visible.sync="is_alert"
                   :center="is_center"
                   width="400px"
                   v-loading="dept_loading">
            <el-form :model="form"
                     :rules="rules"
                     ref="deptForm">
                <el-form-item label="部门名称" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="请输入备注"
                            v-model="form.remark">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="is_alert = false">取 消</el-button>
                <el-button type="primary" @click="editDepartment('deptForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        data() {
            return {
                total:0,//默认数据总数
                pageSize:10,//每页的数据条数
                currentPage:1,//默认开始页面
                page:false,//分页是否展示
                tableData: [],//数据集
                loading: false,//main loading
                is_alert : false,//弹出表单
                is_center: true,//表格居中显示
                dept_loading: false,//表单loading
                form_title: '',
                form: {
                    id:'',
                    name: '',
                    remark: '',
                },
                tmp_form: {
                    id:'',
                    name: '',
                    remark: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入部门名称', trigger: 'blur' },
                        { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
                    ]
                },
            };
        },
        methods: {
            alertForm (type, row) {
                this.is_alert = true;
                switch (type) {
                    case 1://新增部门
                        this.form_title = '新增部门';
                        break;
                    case 2://修改部门
                        this.form_title = '修改部门';
                        this.form.id = row.id;
                        this.form.name = row.name;
                        this.form.remark = row.remark;
                        break;
                }
            },
            closeForm () {
                this.form.id = '';
                this.form.name = '';
                this.form.remark = '';
                this.is_alert = false;
            },
            editDepartment (formName) {
                let url = '/api/api/createDepartment';
                if (this.form.id) {
                    url = '/api/api/editDepartment';
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dept_loading = true;
                        axios.post(url, this.form)
                            .then(res => {
                                if (res.data.status === 201) {
                                    this.$router.push('/login')
                                }
                                if (res.data.status === 200) {
                                    this.tableData.push(res.data.data)
                                    this.$message.success(res.data.msg);
                                }else {
                                    this.$message.error(res.data.msg);
                                }
                                this.is_alert = false;
                                this.dept_loading = false;
                            })
                            .catch(err => {
                                this.dept_loading = false;
                                this.is_alert = false;
                                this.$message.error('服务器异常');
                            })
                    } else {
                        return false;
                    }
                });
            },
            delDepartment(index,row) {
                let conf = this.$layer.confirm('确定删除部门？', {
                    btn: ['确定','取消'], //按钮
                    title:'提示'
                }, () => {
                    this.$layer.close(conf);
                    this.loading = true;
                    axios.delete('/api/api/delDepartment',{params: {id:row.id}})
                        .then(res => {
                            if (res.data.status === 201) {
                                this.$router.push('/login')
                            }
                            if (res.data.status === 200) {
                                this.tableData.splice(index, 1);
                                this.$message.success('删除成功');
                            } else {
                                this.$message.error(res.data.msg);
                            }
                            this.loading = false;
                        })
                        .catch(err => {
                            this.loading = false;
                            this.$message.error('服务器异常');
                        })
                });
            },
            current_change:function(currentPage){
                this.currentPage = currentPage;
            },
            getTotal () {
                this.total = this.tableData.length;
            },
            getList () {
                axios.get('/api/api/getDepartmentList')
                    .then(res => {
                        let len = res.data.data.length;
                        if (res.data.status === 200) {
                            this.tableData = res.data.data
                        } else {
                            this.$router.push('/login')
                        }
                        if (len > this.pageSize) {
                            this.page = true;
                        }
                        this.getTotal();
                    })
                    .catch(err => {
                        this.$message.error('服务器异常');
                    })
            }
        },
        mounted () {
            this.getList();
        },
    }
</script>

<style scoped>
    .fy{
        text-align:center;
        margin-top:30px;
    }
    .title{
        height:100%;
    }
    .manage {
        height: 70px;
        background-color: #f0f9eb;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        line-height: 70px;
        padding-left:20px;
    }
    #dept {
        flex: 1;
        width: 46%;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        margin-right: 5px;
    }
</style>